<template>
  <!-- 今日待办 -->
  <div class="task-do">
    <!-- 顶部标题栏组件 -->
    <top-header :leftArrow="leftArrow"></top-header>
    <!-- 中心内容 -->
    <div class="content">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell center v-for="(item,index) in List" :key="index" @click="toDetail(item)">
          <template #title>
            <van-tag style="margin-right:10px" type="primary" color="burlywood">{{ index + 1 }}</van-tag>
            <span style="font-size:0.4rem">{{item.cust_name}}</span>
          </template>
          <template #label>
            <div>联系人:{{item.linkManName}}</div>
            <div>电话{{item.phone}}</div>
          </template>
          <template #default>
            <div>登记人: {{item.createBy}}</div>
            <div>派单人:{{item.deliverMan}}</div>
            <div>服务人:{{item.staffName}}</div>
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { TopHeader } from '@/components'
import { GetDefaultSer } from '@/request/api'

export default {
  name: 'TaskDo',
  components: {
    TopHeader
  },
  data () {
    return {
      leftArrow: true, // 顶部标题栏组件是否有返回按钮
      loading: false,
      finished: false,
      pageIndex: 0,
      serCount: 0, // 数据总量
      List: []
    }
  },
  methods: {
    onLoad () {
      // 异步更新数据
      setTimeout(() => {
        this.pageIndex++
        // const param = { Id: this.userId, assess_id: '', isChecked: false }
        GetDefaultSer().then(res => {
          console.log(res.result.mySer)
          this.List = [...this.List, ...res.result.mySer]
        })
        // 加载状态结束
        this.loading = false
        // 数据全部加载完成
        if (10 * (this.pageIndex + 1) >= this.serCount) {
          this.finished = true
        }
      }, 1000)
    },
    // 页面跳转到详情
    toDetail (value) {
      console.log('跳转到详情页', value)
      sessionStorage.setItem('TASK_TO_DATA', JSON.stringify(value))
      this.$router.push({ path: '/TaskToDetail' })
    }
  }
}
</script>

<style lang="less" scoped>
.task-do {
  .content {
    .van-list {
      .van-cell {
        box-shadow: 0 3px 4px 2px rgb(240, 240, 240);
      }
    }
  }
}
</style>
